<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title> 自行车后台管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <style type="text/css">
    .contextMenuPlugin {
        
        width: 110px;
        padding: 0;
        border: 1px solid #ccc;
        box-shadow: 0 0 15px #000;
        position: absolute;
    }
    
    .contextMenuPlugin li {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;cursor: pointer;
    }
    
    .contextMenuPlugin li:hover {
        background-color: #324e75;
    }
    
    .contextMenuPlugin > li > a:hover {
        border: 0;
        background: none;
        outline: 0;
    }
    
    .contextMenuPlugin li:hover span {
        color: #fff
    }
    
    .contextMenuPlugin > li > a {
        margin: 0;width: 100%
    }
    
    
    .contextMenuPlugin span {
        font-size: 14px;
        cursor: pointer;color: #494949
    }
    .main3_3{overflow: hidden;}
    </style>
    <!-- jqgrid-->
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="padding: 20px 0">
    <div class="main3_3 cl">
        <!-- 第一个框框 -->
        <div class="input3_3 main fl input2_2">
            <form>
                <ul>
                    
                    <li>
                        <label for="">
                            <span>停车柱编号：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li>
                        <label for="">
                            <span>&nbsp;&nbsp;&nbsp;区&nbsp;&nbsp;&nbsp;域&nbsp;&nbsp;：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li class="time">
                        <div class="demo-content">
                            <form method="post">
                                <p>
                                    <label>开卡时间：</label>
                                    <input type="text" class="calendar" />
                                </p><!-- 
                                 --><p>
                                    <label>至&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <input type="text" class="calendar" />
                                </p>
                            </form>
                            <script src="../bui/jquery-1.8.1.min.js"></script>
                            <script src="../bui/sea.js"></script>
                            <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
                            <!-- script start -->
                            <script type="text/javascript">
                            BUI.use('bui/calendar', function(Calendar) {
                                var datepicker = new Calendar.DatePicker({
                                    trigger: '.calendar',
                                    autoRender: true
                                });
                            });
                            </script>
                            <!-- script end -->
                        </div>
                    </li>
                    <li class="">
                        <label for="">
                            <span>停车点名称：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li class="">
                        <label for="">
                            <span>&nbsp;&nbsp;&nbsp;状&nbsp;&nbsp;&nbsp;态&nbsp;：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li class="">
                        <label for="">
                            <span>&nbsp;版&nbsp;本&nbsp;号&nbsp;：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li class="">
                        <label for="">
                            <span>管理箱编号：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li class="">
                        <label for="">
                            <span>&nbsp;&nbsp;&nbsp;片&nbsp;&nbsp;&nbsp;区&nbsp;&nbsp;：</span>
                            <input type="text" placeholder="请输入">
                        </label>
                    </li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li class="main_btn">
                        <label for="">
                            <input type="button" value="查询">
                            <input type="button" value="导出excel">
                            <input type="button" value="重置">
                        </label>
                    </li>
                   
                </ul>
            </form>
        </div>
        <!-- 第一个框框 -->
        <!-- 第二个框框 表格-->
        <div id="form33_sty" class="fl">
            <div class="form10_tab">
                <table>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>卡号</th>
                        <th>卡类型</th>
                        <th>用户状态</th>
                        <th>余额</th>
                        <th>手机号码</th>
                        <th>证件号</th>
                        <th>开户时间</th>
                        <th>操作员</th>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td>2005</td>
                        <td>市财政局</td>
                        <td>天元区</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                </table>
            </div>
            <div class="pages">
                <ul>
                    <li>共28条</li>
                    <li>第1/1页</li>
                    
                    <li><a href="javascript:void(0)" class="pre_page"><</a></li>
                    <li>
                        <ul class="change">
                            <li><a href="javascript:void(0)" class="active">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)" class="next_page active">></a></li>
                    <li>跳转到第<input type="text">页&nbsp;<a href="javascript:void(0)" class="active1">跳转</a></li>
                </ul>
            </div>
            <!-- 添加窗口 -->
            <div class="form31_1 form3_1 disN">
                <table>
                    <tr>
                        <th colspan=2>添加停车柱<a href="javascript:void(0)" class="close"></a></th>
                    </tr>
                    <tr>
                        <td>停车柱编号：</td>
                        <td>
                           <select>
                               <option>请选择状态</option>
                               <option>玉清</option>
                               <option>上清</option>
                               <option>太清</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td>
                            <select>
                                <option>请选择状态</option>
                                <option>玉清</option>
                                <option>上清</option>
                                <option>太清</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>所属管理箱：</td>
                        <td>
                           <select>
                               <option>请选择停车点</option>
                               <option>青云门门口</option>
                               <option>焚香谷谷口</option>
                               <option>天音阁灭口</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td>备注：</td>
                        <td>
                            <textarea name="" id="" cols="30" rows="3"></textarea>
                        </td>
                    </tr>
                </table>
                <div class="form311_btn">
                    <input type="button" name="" value="确定" class="sure">
                    <input type="button" name="" value="取消" class="cancel">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 添加窗口 -->
            <!-- 删除窗口 -->
            <div class="form31_2 form3_1 disN">
                <div class="bell">
                    <img src="../img/bell.png">
                    <span>确定删除?</span>
                    <span class="grey">删除后不可恢复</span>
                </div>
                <div class="form312_btn">
                    <input type="button" name="" value="取消" class="cancel">
                    <input type="button" name="" value="确定" class="sure">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 删除窗口 -->
            <!-- 修改窗口 -->
            <div class="form31_3 form3_1 disN">
                <table>
                    <tr>
                        <th colspan=2>修改停车柱<a href="javascript:void(0)" class="close"></a></th>
                    </tr>
                    <tr>
                        <td>停车柱编号：</td>
                        <td>
                           <select>
                               <option>110</option>
                               <option>120</option>
                               <option>120111</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td>
                            <select>
                                <option>正常</option>
                                <option>傻了</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>所属管理箱：</td>
                        <td>
                           <select>
                               <option>北京路一号</option>
                               <option>北京东路二号</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td>备注：</td>
                        <td>
                            <textarea name="" id="" cols="30" rows="3"></textarea>
                        </td>
                    </tr>
                </table>
                <div class="form313_btn">
                    <input type="button" name="" value="确定" class="sure">
                    <input type="button" name="" value="取消" class="cancel">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 修改窗口 -->
            <!-- 关停窗口 -->
            <div class="form31_4 form3_1 disN">
                <div class="bell">
                    <img src="../img/bell.png">
                    <span>确定关停</span>
                </div>
                <div class="form314_btn">
                    <input type="button" name="" value="取消" class="cancel">
                    <input type="button" name="" value="确定" class="sure">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 关停窗口 -->
            <!-- 开锁窗口 -->
            <div class="form31_5 form3_1 disN">
                <div class="bell">
                    <img src="../img/bell.png">
                    <span>确定开锁</span>
                </div>
                <div class="form315_btn">
                    <input type="button" name="" value="取消" class="cancel">
                    <input type="button" name="" value="确定" class="sure">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 开锁窗口 -->
            <!-- 批量添加窗口 -->
            <div class="form31_6 form3_1 disN">
                <table>
                    <tr>
                        <th colspan=2>批量添加停车柱<a href="javascript:void(0)" class="close"></a></th>
                    </tr>
                    <tr>
                        <td>停车柱编号：</td>
                        <td>
                           <input type="text" name="">
                           <input type="text" name=""> -
                           <input type="text" name="">
                        </td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td>
                            <select>
                                <option>正常</option>
                                <option>傻了</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>所属管理箱：</td>
                        <td>
                           <select>
                               <option>北京路一号</option>
                               <option>北京东路二号</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td>备注：</td>
                        <td>
                            <textarea name="" id="" cols="30" rows="3"></textarea>
                        </td>
                    </tr>
                </table>
                <div class="form316_btn">
                    <input type="button" name="" value="确定" class="sure">
                    <input type="button" name="" value="取消" class="cancel">
                </div>
                <a href="javascript:void(0)" class="disN">&nbsp;</a>
            </div>
            <!-- 批量添加窗口 -->
            
        </div>
        <!-- 历史记录窗口 -->
        <div class="form33_sty form31_7 form3_1 disN">
            <div class="btn3_2">
                <input type="button" name="" value="返回">
            </div>
            <div class="form10_tab">
                <table>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>卡号</th>
                        <th>卡类型</th>
                        <th>用户状态</th>
                        <th>余额</th>
                        <th>操作员</th>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>1101</td>
                        <td class="green">201503</td>
                        <td>正常</td>
                        <td>3/0/4</td>
                        <td>盈泽演示</td>
                        <td>192.168.10.144</td>
                        <td class="green">TN-黄河南</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="pages">
                <ul>
                    <li>共28条</li>
                    <li>第1/1页</li>
                    
                    <li><a href="javascript:void(0)" class="pre_page"><</a></li>
                    <li>
                        <ul class="change">
                            <li><a href="javascript:void(0)" class="active">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)" class="next_page active">></a></li>
                    <li>跳转到第<input type="text">页&nbsp;<a href="javascript:void(0)" class="active1">跳转</a></li>
                </ul>
            </div>
        </div>
        <!-- 历史记录窗口 -->
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="../js/jquery.contextmenu.js"></script>
        <script>
        $(function() {
            $('#form33_sty tr').contextPopup({
                // title: 'My Popup Menu',
                items: [{
                    label: '添加',
                    // icon: 'img/right_add.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_1").show()
                    }
                }, {
                    label: '批量添加',
                    // icon: 'img/right_del.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_6").show()
                    }
                },{
                    label: '删除',
                    // icon: 'img/right_del.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_2").show()
                    }
                }, {
                    label: '修改',
                    // icon: 'img/right_gai.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_3").show()
                    }
                }, {
                    label: '关停',
                    // icon: 'img/right_gai.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_4").show()
                    }
                }, {
                    label: '开锁',
                    // icon: 'img/right_gai.png',
                    action: function() {
                        $(".form3_1").hide();
                        $(".form31_5").show()
                    }
                },{
                    label: '记录',
                    // icon: 'img/right_del.png',
                    action: function() {
                        $(".form3_1,#form33_sty,.main").hide();
                        $(".form31_7").show()
                    }
                }]
            });
        });
        </script>
        <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
        <script>
        // 点取消，关闭弹出窗
        $(".cancel,.close").click(function() {
            $(".form3_1").hide()
        })
        // 历史记录点击返回
        $(".btn3_2 input").click(function () {
            $(".form3_1,.form31_7").hide();
            $("#form33_sty,.main").show();
        })
        // 点击翻页
        $(".change a").click(function () {
            $(".change a").removeClass('active');
            $(this).addClass('active');
            var num1=$(this).index();
            var num2=$(".change a:last-child").index();
            // 判断是不是第一个
            if (num2==0) {

            } else {}
            // 判断是不是最后一个
            if (num1==num2) {

            } else {}
        })
        // 点击上一页
        $(".pre_page").click(function () {
            var pre_page=$(".change a").index();
            if (pre_page==0) {

            } else {}
            
        })
        </script>
        <!-- 第二个框框 表格-->
    </div>
</body>

</html>
